// 文本对齐
@each $var in(left, center, right) {
	.ta-#{$var} {
		text-align: $var;
	}
}

$number: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 60, 100, 200, 300, 400];

// margin
@each $var in $number {
	.m-#{$var} {
		margin: #{$var}rpx !important;
	}
	.mt-#{$var} {
		margin-top: #{$var}rpx !important;
	}
	.ml-#{$var} {
		margin-left: #{$var}rpx !important;
	}
	.mr-#{$var} {
		margin-right: #{$var}rpx !important;
	}
	.mb-#{$var} {
		margin-bottom: #{$var}rpx !important;
	}
	.mtb-#{$var} {
		margin-top: #{$var}rpx !important;
		margin-bottom: #{$var}rpx !important;
	}
	.mlr-#{$var} {
		margin-left: #{$var}rpx !important;
		margin-right: #{$var}rpx !important;
	}
	.p-#{$var} {
		padding: #{$var}rpx !important;
	}
	.pt-#{$var} {
		padding-top: #{$var}rpx !important;
	}
	.pl-#{$var} {
		padding-left: #{$var}rpx !important;
	}
	.pr-#{$var} {
		padding-right: #{$var}rpx !important;
	}
	.pb-#{$var} {
		padding-bottom: #{$var}rpx !important;
	}
	.ptb-#{$var} {
		padding-top: #{$var}rpx !important;
		padding-bottom: #{$var}rpx !important;
	}
	.plr-#{$var} {
		padding-left: #{$var}rpx !important;
		padding-right: #{$var}rpx !important;
	}
}

// 字体大小
$base-font-size: 20rpx;
$font-sizes: (
	xxxs: 1,
	xxs: 1.1,
	xs: 1.2,
	//
		sm: 1.3,
	// 24
		md: 1.4,
	// 26
		lg: 1.5,
	// 28
		xl: 1.6,
	// 30
		xxl: 1.7,
	//
		xxxl: 1.8
);
@each $sizeKey, $size in $font-sizes {
	.fs-#{$sizeKey} {
		font-size: $size * $base-font-size !important;
	}
}
@each $var in (21, 22, 24, 25, 26, 27, 28, 29, 30, 32, 34, 36, 38, 40, 44, 48, 60) {
	.fs#{$var} {
		font-size: #{$var}rpx !important;
	}
}

// colors 定义颜色
$colors: (
	'primary': #304FFF,
	'white': #fff,
	'light': #f9f9f9,
	'grey': #999,
	'dark-light': #444444,
	'dark': #222,
	'black': #000,
	"red":#E8456A,
	"warn":#fff014,
	'white-70': rgba(255,255,255,0.7),
);
// 循环遍历生成颜色类
@each $colorKey, $color in $colors {
	.text-#{$colorKey} {
		color: $color !important;
	}
	//生成背景
	.bg-#{$colorKey} {
		background: $color;
	}
}

//font-weight
@each $var in (100, 200, 300, 400, 500, 600, 700, 800, 900, lighter, light, normal, bold, bolder) {
	.fw-#{$var} {
		font-weight: $var;
	}
}

// align-items
@each $var in(flex-start, baseline, center, initial, flex-end,inherit) {
	.ai-#{$var} {
		align-items: $var;
	}
}

// white-space
@each $var in(nowrap){
	.ws-#{$var} {
		white-space: $var;
	}
}

// justify-content
@each $var in(inherit, flex-start, flex-end, center, space-around, space-between) {
	.jc-#{$var} {
		justify-content: $var;
	}
}

//flex
@each $var in (1, 1.5, 2, 2.5, 3, 3.5, 4) {
	.flex-#{$var} {
		flex: $var;
	}
}
.fw {
	flex-wrap: wrap;
}

// position
@each $var in(absolute, relative, fixed, inherit, sticky, unset) {
	.po-#{$var} {
		position: $var;
	}
}

.joined {
	-webkit-filter: grayscale(80%);
	/* Chrome, Safari, Opera */
	filter: grayscale(80%);
}
